<template>
	<div class="container">
		<el-button type="primary" class="createBtn" @click="createRow()">创建</el-button>
		<el-table :data="tableData.data" style="width: 100%">
			<el-table-column v-for="(model, index) in tableDataDetail" :prop="model.field" :label="model.name"
				:key="index" width=""></el-table-column>
			<el-table-column fixed="right" label="操作" width="120">
				<template #default="scope">
					<el-button link type="primary" @click="writeRow(scope.$index)" size="small">
						修改
					</el-button>
					<el-button link type="primary" @click="deleteRow(scope.$index)" size="small">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 修改数据 -->
		<div v-if="isWrite" class="writeForm">
			<ul>
				<li><p>修改数据</p></li>
				<li v-for="(item, index) in ruleForm.data" :key="index">
					<p>{{ item.name }}</p>
					<el-input class="elInput" :placeholder="item.name" v-model="item.value" clearable></el-input>
				</li>
				<li>
					<el-button @click="writeRow(null)">取消</el-button>
  					<el-button type="primary" @click="realyWrite()">确认</el-button>
				</li>
			</ul>
		</div>
		<!-- 新增数据 -->
		<div v-if="isCreate" class="writeForm">
			<ul>
				<li><p>新增数据</p></li>
				<li v-for="(item, index) in CreateDataDetail.data" :key="index">
					<p>{{ item.name }}</p>
					<el-input class="elInput" :placeholder="item.name" v-model="item.value" clearable></el-input>
				</li>
				<li>
					<el-button @click="createRow()">取消</el-button>
  					<el-button type="primary" @click="realyCreate()">确认</el-button>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts" name="basecharts">
	import { reactive, ref, onMounted } from 'vue';
	import axios from 'axios';

	const tableDataDetail = reactive([
		{ field: 'id', name: 'ID' },
		{ field: 'name', name: '用户名' },
		{ field: 'gender', name: '性别' },
		{ field: 'age', name: '年龄' },
		{ field: 'area', name: '地区' }])
	const tableData = reactive({data:[]})
	// 删除数据
	function deleteRow(index) {
		const data = { id: tableData.data[index].id }
		axios.post('http://127.0.0.1:5000/deleteuser', data).then((res) => {
			searchRows()
		})
	}

	// 新增数据
	const isCreate = ref(false)
	function createRow() {
		isCreate.value = !isCreate.value
	}
	const CreateDataDetail = reactive({data:[
		{value:'',field:'username', name:'用户名'},
		{value:'',field:'email', name:'性别'},
		{value:'',field:'account_balance', name:'年龄'},
		{value:'',field:'address', name:'地区'}
	]})
	function realyCreate() {
		axios.post('http://127.0.0.1:5000/createUModel', CreateDataDetail).then((res) => {
			searchRows()
			console.log('新增成功')
		})
	}

	// 修改数据
	const isWrite = ref(false)
	const ruleForm = reactive({
		id:null,
		data:[
			{value:'',field:'username', name:'用户名'},
			{value:'',field:'email', name:'性别'},
			{value:'',field:'account_balance', name:'年龄'},
			{value:'',field:'address', name:'地区'}
		]
	})
	function writeRow(index) {
		if(index != null){
			ruleForm.id = tableData.data[index].id
		}
		isWrite.value = !isWrite.value
	}
	function realyWrite() {
		axios.post('http://127.0.0.1:5000/updateUser', ruleForm).then((res) => {
			searchRows()
			console.log('修改成功')
		})
	}

	// 查询字段以及名称
	// function searchModel(){
	// axios.get('http://127.0.0.1:5000/get_all_users').then((res) => {
	// console.log(res)
	// Object.assign(tableDataDetail, res.data)
	// })
	// }
	// searchModel()

	// 查询数据
	function searchRows() {
		axios.get('http://127.0.0.1:5000/get_all_users').then((res) => {
			// let data = [{
			//         username: '王小虎',
			//         email: 'n',
			//         account_balance: '12',
			//         address: '上海市普陀区金沙江路 1518 弄'
			//       }]
			// Object.assign(tableData.data, data)
			Object.assign(tableData, res.data)
		})
	}
	searchRows()
</script>

<style scoped>
	.container {
		overflow: visible;
	}

	.createBtn {
		margin: 10px;
	}

	.writeFrom {
		margin: 0 auto;
		background: #ffffff;
		position: absolute;
		left: 35%;
		top: 35%;
		z-index: 999;
		border: 1px solid #8a8a8a;
		text-align: center;
		line-height: 50px;
		padding: 10px 40px 30px 0;
	}

	.writeForm {
		width: 400px;
		height: 300px;
		background: rgb(255, 255, 255);
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		padding: 20px;
		z-index: 999;
		border: 1px solid #ccc;
	}

	li {
		list-style: none;
		padding: 10px;
		display: flex;
		justify-content: space-around;
	}

	p {
		flex: 3;
		text-align: center;
	}

	.elInput {
		flex: 10;
	}
</style>